<template>
	<view class="myorder">
		<view class="tabnav">
			<scroll-view class="myorderNavBar" scroll-x="true"  :scroll-left="leftNum" show-scrollbar="false">
					<view @tap="setCurrent(0)" :class="{active:current == 0}">全部</view>
					<view @tap="setCurrent(1)" :class="{active:current == 1}">待付款</view>
					<view @tap="setCurrent(2)" :class="{active:current == 2}">待发货</view>
					<view @tap="setCurrent(3)" :class="{active:current == 3}">待收货</view>
					<view @tap="setCurrent(4)" :class="{active:current == 4}">待评价</view>
					<view @tap="setCurrent(5)" :class="{active:current == 5}">退款/售后</view>
				
			</scroll-view>
		</view>
			<view class="empty" v-if="isShowEmpty">
				<image src="../../static/images/dingdan.png" mode="scaleToFill"></image>
			</view>
			<view class="uni-list content" v-if="dataList.length > 0 || refundDataList.length">
			
				<view  v-if="current == 5" class="uni-list-cell outLstbox" v-for="(item,index) in refundDataList" :key="index" style="padding-bottom: 10upx;">
					<view class="storeNameBox">
						<view class="storeName" @tap.stop="goShop(item.storeId)">
							<image class="storepic" src="../../static/images/store.png" mode="widthFix"></image>
							{{item.storeName}}
							<image class="goStore" src="../../static/images/quanbu.png" mode="widthFix"></image>
						</view>
						<text class="status" v-if="item.status == 117">退款成功</text>
						<text class="status"  v-if="item.status == 118">退款失败</text>
						<text class="status"  v-if="item.status == 119">退款关闭</text>
						<text class="status"  v-if="item.status == 120">退款中</text>
					</view>
						<view class="uni-list commodityListBox">
						<view class="uni-list-cell insideListBox">
							<view class="leftPic">
								<image :src="item.productPic" lazy-load="true" mode="widthFix"></image>
							</view>
							<view class="rightInfo">
								<view class="title">
									{{item.productName}}
								</view>
								<view class="desction">
									<text v-if="item.sp1">{{item.sp1}}</text>
									<text v-if="item.sp2">/{{item.sp2}}</text>
									<text v-if="item.sp3">/{{item.sp3}}</text>
								</view>
								<view class="priceBox">
									￥<text class="price">{{item.payPrice}}</text> ×<text>{{item.productQuantity}}</text>
								</view>
							</view>
						</view>
					</view>
					
					<view class="btns">
						<text class="cancel"  @tap.stop="gorevocation(item)">查看详情</text>
					</view>
				</view>
				
				<view v-if="current != 5" class="uni-list-cell outLstbox" v-for="(item,index) in dataList" :key="index" >
					<view class="storeNameBox">
						<view class="storeName" v-if="item.orderType == 5">
							{{item.orderId}}
						</view>
						<view v-else class="storeName" @tap.tap="goShop(item.storeId)">
							<image class="storepic" src="../../static/images/store.png" mode="widthFix"></image>
							{{item.storeName}}
							<image class="goStore" src="../../static/images/quanbu.png" mode="widthFix"></image>
						</view>
						<text class="status" v-if="item.status == 0">待付款</text>
						<text class="status"  v-if="item.status == 3">待发货</text>
						<text class="status"  v-if="item.status == 6">待收货</text>
						<text class="status"  v-if="item.status == 9">待评价</text>
						<text class="status"  v-if="item.status == 24">交易完成</text>
						<text class="status"  v-if="item.status == 32">订单已取消</text>
					</view>
						<view class="uni-list commodityListBox" @tap.stop="goInfo(item)">
						<view class="uni-list-cell insideListBox" v-for="(items,indexs) in item.orderItemVoList" :key="indexs">
							<view class="leftPic">
								<image :src="items.productPic" lazy-load="true" mode="scaleToFill"></image>
							</view>
							<view class="rightInfo">
								<view class="title">
									{{items.productName}}
								</view>
								<view class="desction">
									{{items.productAttr}}
								</view>
								<view class="priceBox">
									￥<text class="price">{{items.payPrice}}</text> ×<text>{{items.productQuantity}}</text>
									<text class="status" v-if="items.status == 117">退款成功</text>
									<text class="status"  v-if="items.status == 118">退款失败</text>
									<text class="status"  v-if="items.status == 119">退款关闭</text>
									<text class="status"  v-if="items.status == 120">退款中</text>
								</view>
								
							</view>
							
						</view>
					</view>
					<view class="census">
						共{{item.orderItemVoList.length}}件商品  总计：￥ <text>{{item.payAmount}}</text>
					</view>
					<view class="btns">
						<text class="cancel" v-if="item.status == 0" @tap.stop="cancelOrder(item)">取消订单</text>
						<text class="pay"  v-if="item.status == 0" @tap.stop="payMoney(item)">付款</text>
						<text class="cancel"  v-if="item.status == 6 || item.status == 9" @tap.stop="goLogistics(item)">查看物流</text>
						<text class="pay"  v-if="item.status == 6" @tap.stop="receive(item)">确认收货</text>
						<text class="pay" v-if="item.status == 9" @tap.stop="goEvaluate(item)">评价</text>
						<text class="cancel"  v-if="item.status == 32 || item.status == 24" @tap.stop="delOrder(item)">删除订单</text>
						
					</view>
					<view class="creatTime">
						{{item.gmtCreate | getTime}}
					</view>
				</view>
				
			</view>
	</view>
</template>

<script>
	import MD5 from '../../common/md5.js'
	export default {
		
			data(){
				return{
					current:0,
					leftNum:0,
					pageNum:1,
					dataList:[],
					refundDataList:[],
					loadStatusText: '加载中...',
					isShowBottom:true,
					isShowEmpty:false
				}
			},
			onLoad(e) {
				this.current = e.type;
			},
			onShow() {
				this.setCurrent(this.current)
			},
			onReachBottom() {
				this.getData()
			},
			methods:{
				setCurrent(num){
					this.current = num;
					if(num >=4){
						 this.leftNum = 30
					}else if(num <4){
						this.leftNum = 0
					}
					this.dataList=[]
					this.refundDataList = []
					this.pageNum = 1
					this.getData()
				},
				//获取订单列表
				getData(){
					let data = {
					  "orderStatus": "",
					  "pageNo": this.pageNum,
					  "pageSize": 10,
					}
					if(this.current == 5){
						this.$http.post('/api/v1.0/order/refund/list',data,res=>{
							if(res.data.status == '000000'){
								this.pageNum++
								if(this.refundDataList.length == 0){
									this.refundDataList = res.data.data.list;
								}else{
									this.refundDataList = this.refundDataList.concat(res.data.data.list);
								}
								if(res.data.data.list.length == 0){
									this.loadStatusText = "已加载全部"
								}else{
									this.loadStatusText = "加载完成"
								}
								if(this.refundDataList.length == 0){
									this.isShowEmpty = true
								}else{
									this.isShowEmpty = false
								}
								console.log(this.refundDataList)
							}
						},fail=>{
							if(this.refundDataList.length == 0){
								this.isShowEmpty = true
							}else{
							this.isShowEmpty = false
						}
						})
						return false;
					}else if(this.current == 0){
						data.orderStatus = ""
					}else if(this.current == 1){
						data.orderStatus = 0
					}else if(this.current == 2){
						data.orderStatus = 3
					}else if(this.current == 3){
						data.orderStatus = 6
					}else if(this.current == 4){
						data.orderStatus = 9
					}
					// /api/v1.0/order/buyer/list
					// 192.168.3.163:8090/api/v1.0/order/detailTwo
					this.$http.post('/api/v1.0/order/buyer/list',data,res=>{
						if(res.data.status == '000000'){
							this.pageNum++
							if(this.dataList.length == 0){
								this.dataList = res.data.data.list;
							}else{
								this.dataList = this.dataList.concat(res.data.data.list);
							}
							if(res.data.data.list.length == 0){
								this.loadStatusText = "已加载全部"
							}else{
								this.loadStatusText = "加载完成"
							}
							
							if(this.dataList.length == 0){
								this.isShowEmpty = true
							}else{
								this.isShowEmpty = false
							}
						}
					},fail=>{
						if(this.dataList.length == 0){
							this.isShowEmpty = true
						}else{
							this.isShowEmpty = false
						}
					})
				},
				//取消订单
				cancelOrder(item){
					var _this = this;
					uni.showModal({
					    content: '确定取消订单？',
						confirmColor:"#F63810",
					    success: function (res) {
					        if (res.confirm) {
								let data = {
									orderId:item.orderId
								}
								_this.$http.post('/api/v1.0/order/cancelOrder',data,res=>{
									console.log(res)
									if(res.data.status == '000000'){
										uni.showToast({
											title:"取消成功！",
											icon:"none"
										})
										_this.pageNum = 0
										_this.dataList = []
										_this.getData()
									}else{
										uni.showToast({
											title:"取消失败，请稍后再试！",
											icon:"none"
										})
									}
								})
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
					
					
				},
				closeSheet(){
					this.isShowBottom = false
				},
				//删除订单
				delOrder(item){
					var _this = this;
					uni.showModal({
					    content: '确定删除订单？',
						confirmColor:"#F63810",
					    success: function (res) {
					        if (res.confirm) {
								let data = {
									orderId:item.orderId
								}
								_this.$http.post('/api/v1.0/order/deleteOrder',data,res=>{
									console.log(res)
									if(res.data.status == '000000'){
										uni.showToast({
											title:"删除成功！",
											icon:"none"
										})
										_this.pageNum = 0;
										_this.dataList = []
										_this.getData()
									}else{
										uni.showToast({
											title:"删除失败，请稍后再试！",
											icon:"none"
										})
									}
								})
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				},
				goShop(id){
					uni.navigateTo({
						url:"../shop/shop?shopId=" + id 
					})
				},
				//查看物流
				goLogistics(item){
					uni.navigateTo({
						url:"../logistics/logistics?orderId=" + item.orderId
					})
				},
				//确认收货
				receive(item){
					var _this = this;
					uni.showModal({
					    content: '确定收货？',
						confirmColor:"#F63810",
					    success: function (res) {
					        if (res.confirm) {
							let data = {
								  "confirmStatus": item.confirmStatus,
								  "orderId": item.orderId
							}
								_this.$http.post('/api/v1.0/order/receive',data,res=>{
									console.log(res)
									if(res.data.status == '000000'){
										uni.navigateTo({
											url:"../result/result?type=receive&data=" + encodeURIComponent(JSON.stringify(item))
										})
									}else{
										uni.showToast({
											title:"确认收货失败，请稍后再试！",
											icon:"none"
										})
									}
								})
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				},
				//评论
				goEvaluate(item){
					uni.navigateTo({
						url:'../evaluate/evaluate?data=' + encodeURIComponent(JSON.stringify(item))
					})
				},
				//退款查看详情
				gorevocation(item){
					uni.navigateTo({
						url:'../refund/revocation?data=' + encodeURIComponent(JSON.stringify(item))
					})
				},
				//付款
				payMoney(item){
					// #ifdef MP-WEIXIN
						this.WXpayMoney(item)
					// #endif
					
					// #ifdef MP-TOUTIAO
						this.TTpayMoney(item)
					// #endif
					
					// #ifdef MP-ALIPAY
						this.ALiPay(item)
					// #endif
				},
				WXpayMoney(item){
					let data = {
						orderId :item.ref3thId,
						payType:"wxpay",
						businessType: 0,
					}
					this.$http.post('/api/v1.0/payParam',data,res=>{
						if(res.data.status == '000000'){
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.data.timeStamp.toString(),
								nonceStr: res.data.data.nonceStr,
								package: "prepay_id=" + res.data.data.packAge,
								signType: 'MD5',
								paySign: res.data.data.paySign,
								success: function (res) {
									uni.navigateTo({
										url:'../result/result?type=pay'
									})
								},
								fail: function (err) {
									
								}
							});
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none"
							})
						}
						
					})
					
				},
				goInfo(item){
					uni.navigateTo({
						url:"orderInfo?orderId=" + item.orderId
					})
				},
				TTpayMoney(item){
					let _this = this
					let data = {
						orderId :item.ref3thId,
						payType:"alipay",
						businessType: 0,
					}
					this.$http.post('api/v1.0/touTiaoPayParam',data,res=>{
						let orderInfo = {
							    app_id: res.data.data.appId,
							    sign_type: "MD5",
							    out_order_no: res.data.data.outOrderNo,
							    merchant_id: res.data.data.merchantId,
							    timestamp: res.data.data.timestamp,
							    product_code: "pay",
							    payment_type: "direct",
							    total_amount: res.data.data.totalAmount,
							    trade_type: "H5",
							    uid: res.data.data.uid,
							    version: "2.0",
							    currency: "CNY",
							    subject: res.data.data.subject,
							    body: "",
							    trade_time: res.data.data.tradeTime,
							    valid_time: res.data.data.validTime,
							    notify_url: res.data.data.notifyUrl,
							    alipay_url:res.data.data.alipayUrl,
							    sign: res.data.data.sign,
							    risk_info: res.data.data.riskInfo
							}
							console.log(orderInfo)
						if(res.data.status == '000000'){
							uni.requestPayment({
								provider: 'toutiao',
								orderInfo:orderInfo,
								service:4,
								success: function (res) {
									let code = res.code
									if(code == 0){
										
										_this.setCurrent(_this.current)
										uni.navigateTo({
											url:'../result/result?type=pay'
										})
									}else{
									}
								},
								fail: function (err) {
									console.log(err)
									_this.setCurrent(_this.current)
								}
							});
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none"
							})
						}
						
					})
				},
				ALiPay(item){
					let data = {
						orderId :item.ref3thId,
						payType:"alipay",
						businessType: 0,
					}
					this.$http.post('api/v1.0/pay',data,res=>{
						if(res.data.status == '000000'){
							uni.requestPayment({
								provider: 'alipay',
								orderInfo:res.data.data,
								success: function (res) {
									if(res.resultCode == '9000'){
										uni.navigateTo({
											url:'../result/result?type=pay'
										})
									}else{
										uni.redirectTo({
											url:'myorder?type=1'
										})
									}
								},
								fail: function (err) {
									console.log('fail:' + JSON.stringify(err));
									uni.redirectTo({
										url:'myorder'
									})
								}
							});
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none"
							})
						}
						
					})
				}
			},
			filters:{
				getTime(val){
					var time = new Date(val)
					let year = time.getFullYear()
					let month = (time.getMonth() + 1)<10?'0' + (time.getMonth() + 1):(time.getMonth() + 1);
					let day = time.getDate()<10?'0' + time.getDate():time.getDate();
					let hours = time.getHours()<10?'0' + time.getHours():time.getHours();
					let min = time.getMinutes()<10?'0' + time.getMinutes():time.getMinutes();
					let sec = time.getSeconds()<10?'0' + time.getSeconds():time.getSeconds();
					return year + '-' + month + '-' + day + ' ' + hours + ":" + min + ":" + sec
				}
			}
	}
</script>

<style lang="scss">
	.myorder{
		min-height: 100vh;
		width: 100vw;
		background-color: #f2f2f2;
		padding-bottom: 20upx;
		position: relative;
		padding-top: 100upx;
		box-sizing: border-box;
		.tabnav{
			z-index: 999;
			position: fixed;
			top: 0;
			background-color: #f2f2f2;
			width: 100%;
			overflow: hidden;
			height: 100upx;
			.myorderNavBar{
				width: 100%;
				display: flex;
				justify-content: space-between;
				 white-space: nowrap;
				 padding-left: 28upx;
				 view{
					 display: inline-block;
					 padding: 30upx 0 10upx;
					 font-size: 28upx;
					 color: #4d4d4d;
					 margin-right: 50upx;
					 &.first-child{
						 padding-left: 0;
					 }
					 &.active{
						 color: #F63810;
						 border-bottom: 5upx solid #FC3F0C;
					 }
				 }
				 ::-webkit-scrollbar {
				 		width: 0;
				 		height: 0;
				 		background-color: transparent;
				 } 
			}
		}
		.empty{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 319upx;
				height: 330upx;
			}
		}
		.content{
			width: 694upx;
			margin: 0 auto;
			margin-top: 30upx;
			.outLstbox{
				background-color: #fff;
				border-radius: 20upx;
				// padding: 30upx;
				margin-top: 20upx;
				.storeNameBox{
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1upx solid #f2f2f2;
					padding: 15upx 30upx;
					.storeName{
						font-size: 28upx;
						color: #333;
						font-weight: bold;
						display: flex;
						align-items: center;
						.storepic{
							width: 36upx;
							height: 36upx;
							margin-right: 10upx;
						}
						.goStore{
							width: 22upx;
							height: 22upx;
							margin-left: 10upx;
						}
					}
					.status{
						color: #F63810;
						font-size: 24upx;
					}
				}
				.commodityListBox{
					margin-bottom: 30upx;
					padding: 0 30upx;
					box-sizing: border-box;
					.insideListBox{
						margin-top: 20upx;
						display: flex;
						justify-content: space-between;
						.leftPic{
							width: 180upx;
							height: 180upx;
							border-radius: 10upx;
							overflow: hidden;
							image{
								width: 180upx;
								height: 180upx;
							}
						}
						.rightInfo{
							width: 400upx;
							.title{
								color: #333;
								font-size: 28upx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								padding: 10upx 0;
							}
							.desction{
								font-size: 22upx;
								color: #808080;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
							.priceBox{
								font-size: 24upx;
								color: #333;
								.price{
									font-size: 32upx;
									margin-right: 20upx;
								}
							}
							.status{
								float: right;
								color: #FFB82E;
							}
						}
						
					}
					
				}
				.census{
					text-align: right;
					box-sizing: border-box;
					padding-right: 30upx;
					font-size: 22upx;
					color: #333;
					text{
						color: #FF484A;
					}
				}
				.btns{
					text-align: right;
					margin-top: 30upx;
					box-sizing: border-box;
					padding-right: 30upx;
					display: flex;
					justify-content: flex-end;
					text{
						display: inline-block;
						font-size: 24upx;
						// padding: 10upx 22upx;
						width: 138upx;
						height: 52upx;
						text-align: center;
						line-height: 52upx;
						border-radius: 26upx;
						margin-left: 20upx;
						&.cancel{
							background-color: #fff;
							color: #999;
							border: 1upx solid #999;
						}
						&.pay{
							background-color: #FF484A;
							color: #fff;
							border: 1upx solid #FF484A;
						}
					}
				}
				.creatTime{
					margin-top: 20upx;
					width: 100%;
					height: 76upx;
					border-top: 1upx solid #f2f2f2;
					box-sizing: border-box;
					padding-right: 30upx;
					font-size: 20upx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
				
			}
			
		}
		.loadStatusText{
			font-size: 24upx;
			text-align: center;
			color: #999999;
			height: 100upx;
			line-height: 100upx;
		}
	}
</style>